<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="chat-text"> <input type="button" value="点击发送" onclick="CHAT.chat()" id="chat-send">

<div style="background-color: gray" id="msg-show"></div>


<script>
    var URL = "ws://127.0.0.1:8088/ws";

    var CHAT = {
        socket:null,
        init:function () {
            if(window.WebSocket){

                CHAT.socket = new WebSocket(URL);//创建webSocket实例对象

                //对webSocket进行初始化
                CHAT.socket.onopen = CHAT.wsopen;
                CHAT.socket.onmessage = CHAT.wsmessage;
                CHAT.socket.onerror = CHAT.wserror;
                CHAT.socket.onclose = CHAT.wsclose;


            }else {
                alert("浏览器不兼容webSocket")
            }
        },
        wsopen:function () {
            console.log('webSocket连接建立成功！');
        },
        wsmessage:function (e) {
            console.log("接收到的参数是：" + e.data);
            var div = document.getElementById("msg-show");
            var html = div.innerHTML;
            div.innerHTML = html + "<br />" + e.data;
        },
        wserror:function () {
            console.log("发生了错误！");
        },
        wsclose:function () {
            console.log("现有连接被关闭");
        },
        chat:function () {//执行消息发送的逻辑
            var text = document.getElementById("chat-text");
            CHAT.socket.send(text.value);
        }
    };

    CHAT.init();//初始化Chat对象

</script>

<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
<!--<script>-->
<!--    $.ajax({-->
<!--        type: 'post',-->
<!--        url: '/user',-->
<!--        data: {-->
<!--            _method: "put",//注意是  _method，不要忘记下划线-->
<!--            username: "gumemngsxt",-->
<!--            password: "123"-->
<!--        },-->
<!--        success: function(data){-->
<!--            console.log(data);-->
<!--        },-->
<!--        error: function(data){-->
<!--            console.log("failed");-->
<!--        }-->
<!--    });-->
<!--</script>-->
</body>
</html>